<!DOCTYPE html>
<html>
<head>
	<title>插页内容</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="yes" name="apple-touch-fullscreen">
	<meta content="telephone=no,email=no" name="format-detection">
	 <link rel="stylesheet" href="../css/normalize.css" type="text/css">
	 <link rel="stylesheet" type="text/css" href="../css/list.css">

	 <link rel="stylesheet" type="text/css" href="../css/base.css">
	 <link rel="stylesheet" type="text/css" href="../css/style.css">
	 <link rel="stylesheet" type="text/css" href="../css/neirong.css">
	 <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
	<script src="../js/jaliswall.js" type="text/javascript"></script>
	 <script type="text/javascript" src="../js/jisuan.js">
	</script>
	<style type="text/css">
	.main{
		width:100%;
	}

		.yellow {
    background: #FFB105;
    width: 9.466667rem;
    height: 1.466667rem;
    box-shadow: 0 1px 6px 0 rgba(140,140,140,0.50);
    margin:0 auto;
    margin-top: 0.266667rem;
}
.lookTime {
    width: 3.466667rem;
    height: 0.426667rem;
    margin-left: 3.066667rem;
    padding-top: 0.453333rem;
}
.look_time {
    width: auto;
    height: 0.426667rem;
    font-size: 0.346667rem;
    color: #FFFFFF;
    letter-spacing: 0.8px;
    float: left;
}
.text{
	letter-spacing:5px;
}
.down {
    width: 0.373333rem;
    height: 0.373333rem;
    float: left;
    margin-left: 0.26rem;
}
	.main{
	 		left:0;
	 	}
	 	.mainImg{
	 		position: absolute;
	 		top:0;
	 		left:0;
	 	}
	 	.none{
	 		display: none;
	 	}
.duoImg{
	width:32%;
	margin-left:2%;
	float: left;
}
.duoImg:nth-of-type(1),
.duoImg:nth-of-type(2),
.duoImg:nth-of-type(3),
.duoImg:nth-of-type(4),
.duoImg:nth-of-type(5)
{
    margin-left:0;
}
/*.duoImg img{
	height:3.466667rem;
	height:2.666667rem;
}*/
.article{
	margin:0 0 3% 0;
	/*line-height: 9.333333rem;*/
	/*height:350px;*/
}

.one_time{
	width:40%;
	height:2.666667rem;
	word-wrap: break-word;
	writing-mode:tb-rl;
	text-overflow:ellipsis;
}
.right{
	float: right;
}
.one_chaImg{
	width:auto;
	height:auto;
}
.chaImg {
	/*display: flex;*/
	/*flex-wrap:wrap;*/
}
.duoImg{
width:100%;
/*height:auto;*/
max-height:6.933333rem;
}
.one_duoImg{
	width:49%;
}
.two_duoImg{
	width: 32%;
}
.one_container{
	width:auto;
	height:auto;
}
.ulLeft{
	width: auto;
	padding:15px;

}
.article {
	height: 15.866667rem;
	width:49%;
	float: left;
	margin-left:2%;
}
.ulLeft>div:nth-of-type(1){
	margin-left:0;
}



.Main{
	width:100%;
	height:auto;
	background:#fff;
	background: url(../images/edit_weixin_bg.png) no-repeat;
	background-size: contain;
}
.Main_main{
	width:auto;
	height:13.6rem;
	padding-left:1.2rem;
	padding-right:1.2rem;
	padding-top:0.48rem;

}
.chaye{
	margin-top:0;
}
.riqi{
	width:100%;
	height:0.373333rem;
	border-bottom:1px solid #979797;
	/*font-family: 104-CAI978;*/
	font-size: 9px;
	color: #000000;
}
.Main_center{
	margin-top:0.346667rem;
	width:100%;
	height:auto;
	overflow: hidden;
}
.Main_left,.Main_right{
	width:3.68rem;
	height:12.266667rem;
	float: left;
}
.Main_right{
	margin-left:0.213333rem;
}
.Main_week{
	width:100%;
	height:0.533333rem;
	color:#fff;
	font-size: 0.266667rem;
}
.Main_text{
	width:100%;
	height:auto;
	padding-top:5px;
	padding-bottom:5px;
	font-family: .PingFangSC-Regular;
	font-size: 9px;
	color: #000000;
}
.week_left,.week_right{
	width:50%;
	height:100%;
	position: relative;
}
.week_right{
	color: #63E0CE;
	height:0.32rem;
	margin-top:0.213333rem;
	text-align: right;
}
.day,.week_time{
	position: absolute;
	top:0;
	left:0.72rem;
}
.week_time{
	top:0.186667rem;
	left:0;
}
.Main_shu{
	width:100%;
	height:4.853333rem;
	overflow: hidden;
	margin-top: 0.213333rem;
}
.Main_heng{
	width: 100%;
	height:2.613333rem;
	overflow: hidden;
	margin-top:0.213333rem;
}
.auto{
	width:auto;
	height: 100%;
}
.di_text{
	font-size: 8px;
	color: #000000;
	width:100%;
	height:auto;
	text-align: center;
	padding-top:0.133333rem;
}

.time{
	width:100%;
}
.time_num{
	width:auto;
	padding-left:0.453333rem;
	padding-right:0.453333rem;
}
.time_num ul{
	overflow: hidden;
}
.month{
	width:1.466667rem;
	height:0.88rem;
	line-height: 0.88rem;
	font-size:0.373333rem;
}
.list_text_top {
	height:1.6rem;
}
.list_text{
	height:auto;
}
.text_list h5{
	font-size: 0.48rem;
	padding-top:0.533333rem;
}
.text_img{
	left:8.4rem;
}
.time_num::-webkit-scrollbar{width:0px;}
.feng{
width:1.866667rem;
height:1.2rem;
background:#86E2D5;
color:#fff;
border-radius: 8px;
line-height: 1.2rem;
text-align: center;
padding-left:0;
margin-left:0.453333rem;
font-size: 0.48rem;
}


	</style>
</head>
<body>
	<div class="container">
		<div class="list_time">
			<div class="list_time_center">
				<div class="list_top">
					<div class="list_text">
						<div class="list_text_top clear">
							<div class="text_list"><h5>目录</h5></div>
							<div class="text_img"><img src="../images/edit_close_icon.png" style="width:1.6rem;height:1.6rem;"></div>
						</div>
						<div class="feng">封面</div>
					</div>
					<div class="time">
						<div class="time_num">
							<ul class="clear">
								<h4 class="year">2014</h4>
								<li class="month month_color">1月</li>
								<li class="month">2月</li>
								<li class="month">3月</li>
								<li class="month">4月</li>
								<li class="month">5月</li>
								<li class="month">6月</li>
								<li class="month">7月</li>
								<li class="month">8月</li>
								<li class="month">9月</li>
								<li class="month">10月</li>
								<li class="month">11月</li>
								<li class="month">12月</li>
							</ul>

							<ul>
								<h4 class="year">2014</h4>
								<li class="month">1月</li>
								<li class="month">2月</li>
								<li class="month">3月</li>
								<li class="month">4月</li>
								<li class="month">5月</li>
								<li class="month">6月</li>
								<li class="month">7月</li>
								<li class="month">8月</li>
								<li class="month">9月</li>
								<li class="month">10月</li>
								<li class="month">11月</li>
								<li class="month">12月</li>
							</ul>

							<ul>
								<h4 class="year">2014</h4>
								<li class="month">1月</li>
								<li class="month">2月</li>
								<li class="month">3月</li>
								<li class="month">4月</li>
								<li class="month">5月</li>
								<li class="month">6月</li>
								<li class="month">7月</li>
								<li class="month">8月</li>
								<li class="month">9月</li>
								<li class="month">10月</li>
								<li class="month">11月</li>
								<li class="month">12月</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="list_bot">
				</div>
			</div>
		</div>
		<div class="center_container">
	 		<div class="center_zhao">
			<div class="edit_container">
			</div>
			<div class="list_container">
				<div class="list-top">
					<div class="no">
						<img src="../images/edit_close_icon.png" style="width:1.28rem;height:1.28rem">
					</div>
					<div class="icon_top">
						<ul style="margin-bottom:0.533333rem;">
							<li><a href="" style="font-size: 0.426667rem;color: #828282;">内容编辑</a></li>
							<li><a href=""><img src="../images/edit_modify_the_content_icon.png"><strong>修改内容</strong>
							</a>
							</li>
							<li><a href=""><img src="../images/edit_restore_content_icon.png"><strong>恢复内容</strong>
							</a>
							</li>
							<li><a href=""><img src="../images/edit_to_add_on_icon.png"><strong>补充内容</strong>
							</a>
							</li>
							<li><a href=""><img src="../images/edit_choose_the_year_icon.png"><strong>选择月年</strong>
							</a>
							</li>
						</ul>

						<ul>
								<li><a href="" style="font-size: 0.426667rem;color: #828282;">样式编辑</a></li>
								<li class="clear"><a href=""><img src="../images/edit_switch_the_cover_image_icon.png"><strong>切换封面图片</strong>
								</a>
								</li>
								<li class="clear"><a href=""><img src="../images/edit_modify_the_cover_icon.png"><strong>修改封面</strong>
								</a>
								</li>
								<li class="clear"><a href=""><img src="../images/edit_more_settings_icon.png"><strong>更多设置</strong>
								</a>
								</li>
							</ul>
					</div>
				</div>
				<div class="list-bot">
					<div class="back clear">
						<div class="edit_share">
							<img src="../images/edit_share_icon.png"><a href="">分享好友</a>
						</div>
						<div class="edit_return"><img src="../images/edit_return_bookshelf_icon.png"><a href="">返回书架</a></div>
					</div>
				</div>
			</div>
			</div>
		</div>
		<div class="main">
			<div class="chaye">
				<div class="chayeImg">
					<div class="mainImg">
						<img src="../images/insert_a4_01.png" class="img">
					</div>
					<div class="mainImg">
						<img src="../images/insert_a4_01.png" class="img">
					</div>
					<div class="mainImg">
						<img src="../images/insert_a4_01.png" class="img">
					</div>
					<div class="mainImg">
						<img src="../images/insert_a4_01.png" class="img">
					</div>
					<div class="mainImg">
						<img src="../images/insert_a4_01.png" class="img">
					</div>

				</div>
				<div class="yearTime">2017</div>
			</div>

			<div class="Main">
				<div class="Main_main">
					<div class="riqi">2014/02</div>
					<div class="Main_center">
						<div class="Main_left">
							<div class="Main_week">
								<div class="week_left left">
									<div class="day">18</div>
									<div class="week_time">星期五</div>
								<img src="../images/edit_date_icon.png" style="width:1.066667rem;height:100%;"></div>
								<div class="week_right left">18:49</div>
							</div>
							<div class="Main_text">今晚在宿舍玩不破的泡泡…可好玩啦。头上的泡泡都会破耶...</div>
							<div class="Main_shu"><img src="../images/小小梦想.jpg" class="auto"></div>
							<div class="Main_heng"><img src="../images/8.png" class="auto"></div>
						</div>
						<div class="Main_right">
							<div class="Main_week">
								<div class="week_left left">
									<div class="day">18</div>
									<div class="week_time">星期五</div>
								<img src="../images/edit_date_icon.png" style="width:1.066667rem;height:100%;"></div>
								<div class="week_right left">18:49</div>
							</div>
							<div class="Main_text">今晚在宿舍玩不破的泡泡…可好玩啦。头上的泡泡都会破耶...</div>
							<div class="Main_shu"><img src="../images/小小梦想.jpg" class="auto"></div>
							<div class="Main_shu"><img src="../images/小小梦想.jpg" class="auto"></div>
						</div>

					</div>
					<div class="di_text">-2-</div>
				</div>
			</div>

		</div>
		<div class="yellow">
			<div class="lookTime">
				<div class="look_time">查看2014年2月</div>
				<div class="down"><img class="img" src="../images/edit_to_view_icon.png"></div>
			</div>
		</div>
		<div class="footer">
			<div class="radius"></div>
			<div class="footer-img">
				<div class="edit"><img src="../images/edit_edit_btn_nor.png" style="height:100%;width:100%;"></div>
				<div class="list-img"><img src="../images/wechat_ book_edit_catalog_icon_nav_nor.png" style="width:1.066667rem;height:1.066667rem;"><a style="display:block;width:100%;height:0.4rem;font-size: 10px;color: #5BC7B8;">目录</a></div>
				<div class="buy"><img src="../images/edit_buy_btn_nor.png" style="height:100%;width:100%;"></div>
			</div>
		</div>
	</div>
<script src="../js/list.js" type="text/javascript"></script>

<script type="text/javascript">
	// $(function(){
	// 	$('.chaImg').jaliswall({ item: '.duoImg' });
	// 	var chaImg = $('.chaImg').length;
	// 	for(var i=0;i<chaImg;i++){
	// 		var duoImg =$('.chaImg').eq(i).children('div').children('div').length;
	// 		console.log(duoImg);
	// 		if(duoImg==1){
	// 		$('.chaImg').eq(i).children('div').css('width','auto');
	// 		}else{
	// 			$('.chaImg').eq(i).children('div').css('width','49%');
	// 		}
	// 		// if(duoImg==2){

	// 		// // $('.wall-column').css('width','49%');
	// 		// }
	// 	}
	// });





</script>
</body>

</html>